import { Component } from 'react'
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

export default class Index extends Component {
  constructor (props) {
    super(props)

    this.state = {
      swipers: []
    }
  }

  getSwipersData = async () => {
    const res = await Taro.$request({
      url: 'home/swiperdata'
    })

    if (res.meta.status === 200) {
      console.log(res.message)
      this.setState({
        swipers: res.message
      })
    }
  }

  componentDidMount () {
    this.getSwipersData()
  }

  renderSwiper = () => {
    return (
      <Swiper className='swiper' circular indicatorDots autoplay>
        {this.state.swipers.map(item => {
          return (
            <SwiperItem className='swiper-item' key={item.goods_id}>
              <Image className="image" src={item.image_src} />
            </SwiperItem>
          )
        })}
      </Swiper>
    )
  }

  render () {
    return (
      <View className='index'>
        {/* 1.0 渲染轮播图 */}
        {this.renderSwiper()}
      </View>
    )
  }
}
